<template>
    <div class="footer">
      <div class="container">
        <!-- 链接 -->
        <div class="footer-links cf">
          <dl class="col-link">
            <dt>灵感来源</dt>
            <dd><a href="https://www.mi.com/">小米官网</a></dd>
            <dd><a href="https://www.cnhnb.com/">惠农网</a></dd>
            <dd><a href="http://xmall.exrick.cn/#/home">XMall</a></dd>
          </dl>
          <dl class="col-link">
            <dt>技术支持</dt>
            <dd><a href="https://gitee.com/AUAN-1">开源作者</a></dd>
            <dd><a href="https://gitee.com/AUAN-1/poverty-alleviation-mall">前端支持</a></dd>
            <dd><a href="https://gitee.com/AUAN-1/poverty-alleviation-mall-server">后端支持</a></dd>
          </dl>
          <dl class="col-link">
            <dt>其他项目</dt>
            <dd><a href="https://gitee.com/AUAN-1/vue-xiaomi">仿小米官网</a></dd>
            <dd><a href="https://gitee.com/AUAN-1/vue_money">资金管理系统</a></dd>
            <dd><a href="https://gitee.com/AUAN-1/vue-easy-gun">枪支管理系统</a></dd>
          </dl>
          <dl class="col-link">
            <dt>关注我吧</dt>
            <dd><a href="https://blog.csdn.net/abcquan123">CSDN</a></dd>
            <dd><a href="https://home.cnblogs.com/u/2118298">博客园</a></dd>
            <dd><a href="https://www.jianshu.com/u/49b41ad97f40">简书</a></dd>
          </dl>
          <dl class="col-link">
            <dt>社交账号</dt>
            <dd><a href="#" @click="weibo">新浪微博</a></dd>
            <dd><a href="#" @click="wx">微信</a></dd>
            <dd><a href="#" @click="email">邮箱</a></dd>
          </dl>
          <dl class="col-link">
            <dt>资助一下</dt>
            <dd><a href="#" @click="zhifubao">支付宝</a></dd>
            <dd><a href="#" @click="weixin">微信</a></dd>
            <dd><a href="#" @click="qq">QQ</a></dd>
          </dl>
          <div class="col-contact">
            <p class="phone">18207458006</p>
            <p class="time">8:00-18:00（不会加班服务的哦）</p>
            <p class="person-phone" @click="personPhone">人工客服 </p>
          </div>
        </div>
        <!-- 一些声明 -->
        <div class="state">
            <div class="power">
              <span>版权所有：QUAN&LIGHT</span>
            </div>
            <span>让每个人都能享受营养健康的扶贫产品</span>
        </div>
      </div>
    </div>
</template>
<script>
export default {
    data() {
      return {
        
      }
    },
    methods: {
      // 人工客服
      personPhone(){
        this.$message.success('资金不够，等发展起来再说，还是打我的吧 18207458006')
      },
      // 资助一下
      zhifubao(){
        this.$confirm("<p style='width:366px;height:390px;overflow: hidden;'><img src='/img/zhifubao.jpg' style='display:block;width:100%;height:100%'></img></p>", "谢谢打赏", {
          type: "success",
          center:true,
          dangerouslyUseHTMLString: true,
          showCancelButton:false,
          showConfirmButton:true,
        })
      },
      weixin(){
        this.$confirm("<p style='width:366px;height:455px;overflow: hidden;'><img src='/img/weixin.jpg' style='display:block;width:100%;height:100%'></img></p>", "谢谢打赏", {
          type: "success",
          center:true,
          dangerouslyUseHTMLString: true,
          showCancelButton:false,
          showConfirmButton:true,
        })
      },
      qq(){
        this.$confirm("<p style='width:366px;height:370px;overflow: hidden;'><img src='/img/qq.jpg' style='display:block;width:100%;height:100%'></img></p>", "谢谢打赏", {
          type: "success",
          center:true,
          dangerouslyUseHTMLString: true,
          showCancelButton:false,
          showConfirmButton:true,
        })
      },
      // 社交账号
      weibo(){
        this.$message.success('微博搜索 QUAN-铨')
      },
      wx(){
        this.$message.success('微信搜索 18207458006')
      },
      email(){
        this.$message.success('我的邮箱 2395816280@qq.com')
      }
    },
}
</script>
<style lang="less" scoped>
.footer{
  width: 100%;
  background-color: #fff;
  .container{
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
    .footer-links{
      padding: 30px 0;
      .col-link{
        float: left;
        width: 160px;
        height: 112px;
        margin: 0;
        dt{
          margin: 0 0 15px;
          font-size: 14px;
          color: #424242;
        }
        dd{
          margin: 10px 0 0;
          a{
            font-size: 12px;
            color: #757575;
            &:hover{
              color: #00e28b;
            }
          }
        }
      }
      .col-contact{
        text-align: center;
        .phone{
          font-size: 20px;
          color: #00e28b;
        }
        p{
          margin-top: 8px;
        }
        .person-phone{
          display: inline-block;
          width: 90px;
          height: 35px;
          line-height: 35px;
          border: 1px solid #00e2b8;
          color: #00e28b;
          border-radius: 5px;
        }
      }
    }
    .state{
      text-align: center;
      padding-bottom: 20px;
      color: #757575;
      .power{
        margin-bottom: 5px;
      }
      >span{
        font-size: 20px;
        letter-spacing: 2px;
      }
    }
  }
}
</style>